<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册 - Supabase</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="register.css">
</head>
<body>
    <div class="container">
        <div class="card">
            <div class="header">
                <h1>用户注册</h1>
                <p>创建您的账户</p>
            </div>

            <div class="form-container">
                <!-- 注册方式切换 -->
                <div class="login-method-tabs">
                    <button id="reg-email-tab" class="tab-button active">邮箱注册</button>
                    <button id="reg-phone-tab" class="tab-button">手机注册</button>
                </div>
                
                <!-- 邮箱注册表单 -->
                <div id="email-reg-form" class="login-form">
                    <div class="form-group">
                        <label for="reg-email">邮箱地址</label>
                        <input type="email" id="reg-email" placeholder="请输入您的邮箱">
                    </div>
                    
                    <div class="form-group">
                        <label for="reg-password">密码</label>
                        <input type="password" id="reg-password" placeholder="请输入密码（至少6位）">
                    </div>
                    
                    <div class="form-group">
                        <label for="confirm-password">确认密码</label>
                        <input type="password" id="confirm-password" placeholder="请再次输入密码">
                    </div>
                    
                    <button id="register-btn" class="btn">注册</button>
                </div>
                
                <!-- 手机注册表单 -->
                <div id="phone-reg-form" class="login-form hidden">
                    <!-- 手机注册方式切换 -->
                    <div class="phone-method-tabs">
                        <button id="phone-reg-code-tab" class="phone-tab-button active">验证码注册</button>
                        <button id="phone-reg-password-tab" class="phone-tab-button">密码注册</button>
                    </div>
                    
                    <!-- 验证码注册 -->
                    <div id="phone-code-register" class="phone-register-method">
                        <div class="form-group">
                            <label for="reg-phone">手机号码</label>
                            <div class="phone-input-wrapper">
                                <div class="phone-prefix">+86</div>
                                <input type="tel" id="reg-phone" placeholder="请输入手机号码" maxlength="13">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="reg-verification-code">验证码</label>
                            <div class="verification-code-group">
                                <input type="text" id="reg-verification-code" class="verification-input" placeholder="请输入6位验证码" maxlength="6">
                                <button id="reg-send-code-btn" class="btn send-code-btn">发送验证码</button>
                            </div>
                        </div>
                        
                        <button id="phone-code-register-btn" class="btn">验证码注册</button>
                    </div>
                    
                    <!-- 密码注册 -->
                    <div id="phone-password-register" class="phone-register-method hidden">
                        <div class="form-group">
                            <label for="phone-reg-number">手机号码</label>
                            <div class="phone-input-wrapper">
                                <div class="phone-prefix">+86</div>
                                <input type="tel" id="phone-reg-number" placeholder="请输入手机号码" maxlength="13">
                            </div>
                        </div>
                        
                        <div class="form-group">
                            <label for="phone-reg-password">密码</label>
                            <input type="password" id="phone-reg-password" placeholder="请输入密码（至少6位）">
                        </div>
                        
                        <div class="form-group">
                            <label for="phone-reg-confirm-password">确认密码</label>
                            <input type="password" id="phone-reg-confirm-password" placeholder="请再次输入密码">
                        </div>
                        
                        <button id="phone-password-register-btn" class="btn">密码注册</button>
                    </div>
                    
                    <div class="security-tips">
                        <h4>注册说明：</h4>
                        <ul>
                            <li>验证码将通过短信发送到您的手机</li>
                            <li>请妥善保管您的密码</li>
                            <li>注册即表示同意我们的服务条款</li>
                        </ul>
                    </div>
                </div>
                
                <div class="auth-link">
                    <p>已有账户？ <a href="index.html">立即登录</a></p>
                </div>
                
                <div id="message" class="message"></div>
            </div>
            
            <div class="footer">
                <p>Supabase 认证系统 &copy; 2024</p>
            </div>
        </div>
    </div>

    <script src="../supabase-js/supabase.js"></script>
    <script src="../js/supabase-config.js"></script>
    <script src="../js/common.js"></script>
    <script src="register.js"></script>
    <script>
        // 初始化注册页面
        document.addEventListener('DOMContentLoaded', function() {
            initRegisterPage();
        });
    </script>
</body>
</html>